<template>
    <el-space>
        <div>
            <mi-up-image v-model="value_c"/>
        </div>
        <el-tooltip content="生成随机头像">
            <el-button icon="Refresh" @click="makeAvatar" />
        </el-tooltip>
    </el-space>

</template>

<script setup lang="ts">

import {computed} from "vue";

const props = withDefaults(defineProps<{
    modelValue?: string,
}>(), {
    modelValue:'',
})
const emits = defineEmits(["update:modelValue"])

const value_c = computed({
    get:() => {
        return props.modelValue
    },
    set: (val: string) => {
        emits("update:modelValue", val)
    }
})

// 随机生成头像
const makeAvatar = () => {
    const arr = [
        '/static/sys_avatar/Avatar-12_96.png',
        '/static/sys_avatar/Avatar-13_96.png',
        '/static/sys_avatar/Avatar-14_96.png',
        '/static/sys_avatar/Avatar-21_96.png',
        '/static/sys_avatar/Avatar-26_96.png',
        '/static/sys_avatar/Avatar-27_96.png',
        '/static/sys_avatar/Avatar-28_96.png',
        '/static/sys_avatar/Avatar-36_96.png',
    ];
    const a = arr.length
    let index = Math.floor(Math.random() * a)
    value_c.value = arr[index]
}

</script>

<style scoped>

</style>
